<template>
  <!-- 整个页面 -->
  <div class="Login">
    <!-- <div class="weihu" style="width:100%; text-align: center;" v-if="weihu == 0">
			<img src="@/assets/weihuzhong1.svg" alt="" style="display: block; width:40%; margin: 0 auto;">
			<div style="color:#fff; font-size:24px">正在维护中</div>
		</div> -->
    <div class="Login">
      <div class="main">
        <!-- 登录页面的标题 -->
        <div class="title">欢迎来到指南针</div>
        <el-form
          :model="loginForm"
          ref="loginForm"
          class="login-loginForm"
          :rules="rules"
        >
          <el-form-item prop="account_name">
            <div class="usernumber">
              <img src="@/assets/user2.png" class="dashadiao" /><input
                type="text"
                class="Useraccount"
                v-model="loginForm.account_name"
                placeholder="请输入您的手机号"
              />
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <div class="QQ">
              <img src="@/assets/pwd1.png" class="dashadiao" />
              <input
                onpaste="return false" oncontextmenu="return false" oncopy="return false" oncut="return false"
                name="pwd"
                type="password"
                class="QQnumber"
                v-model="loginForm.password"
                placeholder="请输入您的账号密码"
                show-mima
                @keyup.enter="LoginBt"
              /><el-checkbox v-model="keepPassword" class="jizhu"
                >记住账号密码</el-checkbox
              >
            </div>
          </el-form-item>
          <el-form-item>
            <div class="loginrow">
              <el-button
                type="primary"
                id="login"
                class="LoginBt"
                @click="LoginBt('loginForm')"
                >登录</el-button
              >
            </div>
          </el-form-item>
        </el-form>
        <!-- 登录页面的账号 -->
        <!-- 登录页面的密码 -->
        <!-- <div class="inp"><input type="checkbox" class="dian"><span class="jizhu">记住我的账号</span></div> -->

        <div class="mowei">
          <span class="moweiyi">没有账号？</span>
		  <a href="javascript:(0)" class="moweier" @click="tiaozhuan">立即注册</a>
        </div>
      </div>

      <!-- 客服 -->
      <!-- <el-dialog
        title="微信添加客服"
        :visible.sync="dialogVisible"
        width="350px"
        style="text-align: center !important;"
      >
        <el-form label-width="" :model="formLabelAlign">
          <span>账号未激活,请扫码联系客服激活账号。</span>
          <br /><br /><br />
          <img :src="wximg" class="kfbg" />
          <br /><br />
          <el-form-item>
            <el-button type="primary" @click="gb">关闭</el-button>
          </el-form-item>
        </el-form>
      </el-dialog> -->
    </div>
  </div>
</template>
<script>
import { _debounce1 } from "../../public/App";
import { setToken } from '@/utils/auth'
export default {
  data() {
    return {
      loginForm: {
        account_name: "",
        password: ""
      },
      formLabelAlign: {},
      weihu: "",
      keepPassword: false,
      rules: {
        account_name: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
            message: "请输入正确的手机号！"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "请输入长度在 6 到 15 个字符的密码！",
            trigger: "blur"
          }
        ]
      },
      wximg:''
    };
  },


  computed: {},
  methods: {
    tiaozhuan() {
      this.$router.push("/Register");
    },
    LoginBt: _debounce1(function(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const [err, res] = await this.$http.request({
            url: "/login_in",
            method: "POST",
            data: this.loginForm
          });
          if (err) return;
          if (res.data.result == 1) {
            setToken(res.data.data.token);
            let user = res.data.data;
            this.$store.commit("updateUser", user);
              this.$message({
              showClose:true,
              message:'登录成功',
              type:'success',
              duration:1800
            })
            //定时器
            setTimeout(() => {
              this.$router.replace({name:"My"})
            }, 2000);
              this.$router.push("/My");
              if (this.keepPassword == true) {
                localStorage.setItem("userName", this.loginForm.account_name);
                localStorage.setItem("password", this.loginForm.password);
              } else {
                localStorage.removeItem("userName");
                localStorage.removeItem("password");
              }
              // break;
              return;
          }
        } else {
          return false;
        }
      });
    }),
  },
  created() {
    if (localStorage.getItem("userName") || localStorage.getItem("password")) {
        this.loginForm.account_name = localStorage.getItem("userName");
        this.loginForm.password = localStorage.getItem("password");
        this.keepPassword = true;
    }
  }
};
</script>
<style lang="stylus" scoped>
@import './Login.styl'
</style>
